/*
 * @Description: 表单填写-第二步
 * @Author: ziwei.ma
 * @Date: 2019-07-29 15:30:59
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-21 17:57:58
 */

<template>
  <div id="App">
    <title-bar></title-bar>
    <div
      class="page"
      :class="isHidden?'page-hidden':'page-auto'"
    >
      <user-info ref="userInfo"></user-info>
      <remark-column @clickRemark="clickRemark"></remark-column>
      <agreement ref="agreement"></agreement>
    </div>
    <!-- 底部栏 -->
    <div class="submit-bar-warpper flex-h fontsize32 submit-bar">
      <div class="deposit flex1">
        <span>定金：</span>
        <span class="baseColorNoAcitve">¥{{depositAmount}}</span>
      </div>
      <div
        class="submit-btn baseBgColorWithActive"
        @click="submitOrder"
      >提交预约</div>
    </div>
    <remark
      ref="mask"
      @sendContent="getContent"
    ></remark>
    <payment
      ref="Payment"
      @placeOrder="onPlaceOrder"
      :depositAmount="depositAmount"
      @isHidden="getHidden"
    ></payment>
  </div>
</template>

<script>
import TitleBarVue from '../components/TitleBar'
import AgreementVue from '../components/Agreement.vue'
import Step2RemarkColumnVue from '../components/Step2RemarkColumn.vue'
import Step2UserInfoVue from '../components/Step2UserInfo.vue'
import RemarkVue from '../components/Remark.vue'
import PaymentVue from '@/components/Payment'
import { setReservationForm } from '../api/api'

export default {
  components: {
    'title-bar': TitleBarVue,
    'user-info': Step2UserInfoVue,
    'remark-column': Step2RemarkColumnVue,
    'agreement': AgreementVue,
    'remark': RemarkVue,
    'payment': PaymentVue
  },
  data() {
    return {
      content: '',
      textNum: '',
      payment: '', // 接收从支付弹窗组件传上来的支付方式
      isClicked: false// 支付按钮点击状态
    }
  },
  computed: {
    depositAmount() {
      let deposit = JSON.parse(localStorage.getItem('BCglobals')).DEPOSIT_AMOUNT
      return (deposit / 100).toFixed(2)
    }
  },
  methods: {
    // 获取hidden的状态，限制页面过长，支付方式弹出后，页面仍然可滑动，true为设置page为hidden，false为设置auto
    getHidden(isHidden) {
      this.isHidden = isHidden
      console.warn('this.isHidden', this.isHidden)
    },
    // 点击备注栏弹出输入弹窗
    clickRemark() {
      this.$refs.mask.show()
    },
    getContent(content, textNum) {
      this.$set(this, 'content', content)
      this.$set(this, 'textNum', textNum)
    },
    // 获取子组件传出的包车服务协议勾选状态
    // agreementCheck(isAgreementCheck) {
    //   this.isAgreementCheck = isAgreementCheck
    // },

    // 点击预约单进行表单验证,检验成功则拉起支付
    submitOrder() {
      Promise.all([
        this.$refs.userInfo._verifyUserInfo(),
        this.$refs.agreement._verifyAgreement()
      ]).then(data => {
        this.$refs.Payment.show()
      }).catch(result => {
        this.showToast(result)
      })
    },

    // 调用底层toast提示
    showToast(msg) {
      this.$Toast.then(Toast => {
        Toast.showShortBottom(
          msg,
          () => { }
        )
      })
    },
    // 点击支付弹窗内的支付按钮调起支付
    onPlaceOrder(payment) {
      // 接收子组件传上来的支付方式
      this.payment = payment
      if (!this.isClicked) {
        this.isClicked = true
        setTimeout(() => {
          this.isClicked = false
        }, 3000)
        // 发送请求
        setReservationForm(
          JSON.parse(localStorage.getItem('BCglobals')).DEPOSIT_AMOUNT,
          this.$store.getters.numberOfPeople,
          this.$store.getters.numberOfVehicles,
          this.$store.getters.startPoint,
          this.$store.getters.stationList,
          this.$store.getters.endPoint,
          this.$store.getters.startTime.TIMESTAMP,
          this.$store.getters.endTime.TIMESTAMP,
          this.$store.getters.userName,
          this.$store.getters.userPhone,
          this.payment,
          this.$store.getters.secondUserName,
          this.$store.getters.secondUserPhone,
          this.$store.getters.eMail,
          this.$store.getters.remark
        ).then(res => {
          // window.localStorage.setItem('TRADE_ID_jdlfa12', res.orderNO)
          window.doPaymentByType(this.payment, res.paymentStr, () => {
            // 成功回调
            this.$AppRouterUtils.open('paymentResult.html?_bbv=false&orderNO=' + res.orderNO + '&paymentStatu=' + 1)
          }, () => {
            // 失败回调
            this.$AppRouterUtils.open('paymentResult.html?_bbv=false&orderNO=' + res.orderNO + '&paymentStatu=' + 0)
          }).catch(err => {
            this.isClicked = false
            console.dir(err)
          })
        })
      }
    }
  }

}
</script>

<style scoped>
.page {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  padding: 0 32px;
}
.page-hidden {
  overflow-y: hidden;
}
.page-auto {
  overflow-y: auto;
}
/* 底部栏 */
.submit-bar-warpper {
  position: fixed;
  bottom: 0;
  width: 750px;
  height: 112px;
  line-height: 112px;
  background-color: #fff;
  font-weight: bold;
}
.deposit {
  padding-left: 30px;
}
.submit-btn {
  width: 248px;
  text-align: center;
  color: #ffffff;
}
</style>
